<template>
    <div class="login-box">
        <div class="title">万象优选</div>
        <div class="ipt-item">
            <input type="text" placeholder="输入登录手机号" v-model="phone">
        </div>
        <div class="ipt-item">
            <input type="text" v-model="code" placeholder="输入验证码">
            <span @click='getCodeEvt'>获取验证码</span>
        </div>
        <van-checkbox v-model="remember" checked-color="#d4380d">记住手机号？</van-checkbox>
        <van-checkbox v-model="autoLogin" checked-color="#d4380d">是否7天免登录？</van-checkbox>
        <van-button block @click="loginEvt" color="linear-gradient(to right, #ff7a45, #ad2102)">登录</van-button>
        <van-checkbox v-model='agree' checked-color="#d4380d">同意万象优选的使用协议？</van-checkbox>
        <!-- <router-link to='/register' class="reg">去注册？</router-link> -->
        <div class="reg" @click="jumpToRegister">去注册？</div>
    </div>
</template>
<script setup>
import { ref } from 'vue'
import { Toast } from 'vant'
import { commonDefinition } from '../../store'
import { deCodeApi, enCodeApi } from '../../utils'
import { getCodeApi, loginApi } from '../../apis/loginApi'
import { useRouter } from 'vue-router'

const remember = ref(false)
const autoLogin = ref(false)
const agree = ref(true)
const phone = ref('')
const code = ref('')
const router = useRouter()

/**
 * 获取记住手机号的缓存
 * 如果有记住手机号，需要给phone赋值，并且把记住手机号的标识勾选上
 */
let phoneCache = localStorage.getItem('user-phone')
if (phoneCache) {
    try {
        phoneCache = deCodeApi(phoneCache)
        phone.value = phoneCache
        remember.value = true
    } catch { }
}

// 获取验证码事件
function getCodeEvt() {
    if (!/^1[3-9]{1}[0-9]{9}$/g.test(phone.value)) {
        Toast({
            message: '输入正确的手机号',
            position: 'bottom'
        })
        return
    }
    Toast.loading({
        message: '加载中...',
        forbidClick: true
    })
    getCodeApi(phone.value).then(d => {
        if (d.code === 200) {
            Toast.success('获取验证码\n' + d.data.code)
        } else {
            Toast.fail('获取验证码失败，原因：' + d.message)
        }
    })
    return
}
// 登录事件
async function loginEvt() {
    // debugger
    if (!agree.value) {
        Toast.fail('请勾选用户协议')
        return
    }
    let result = await loginApi({
        phone: phone.value,
        code: code.value
    })
    if (result.code !== 200) {
        Toast.fail('登录失败，原因：' + result.message)
        return
    }

    let str = enCodeApi(result.data.token + '---' + Date.now())
    sessionStorage.setItem('login-flag', str)
    commonDefinition().setToken(result.data.token)
    // debugger
    localStorage.setItem('phone', phone.value)

    /** 判断用户是否同意免登录,记住手机号勾选同意用户协议，同意需要加密缓存，不同意需要删除之前保留的信息 */
    if (autoLogin.value) {
        // debugger
        localStorage.setItem('auto-login', enCodeApi(result.data.token + '---' + Date.now()))
    } else {
        localStorage.removeItem('auto-login')
    }
    if (remember.value) {
        localStorage.setItem('user-phone', enCodeApi(phone.value))
    } else {
        localStorage.removeItem('user-phone')
    }
    router.push('/home')
}

// 跳转到注册页面
function jumpToRegister(){
    console.log('-----------')
    router.push('/register')
}
</script>
<style lang="less" scoped>
@import '../../style/common.less';

.login-box {
    display: block;
    position: relative;
    height: 100%;
    padding: 15vh 20px 0;

    >.title {
        display: block;
        position: relative;
        text-align: center;
        font-size: 1rem;
        color: @c07;
        line-height: 28px;
        margin-bottom: 12px;

        &::before {
            content: '';
            display: inline-block;
            vertical-align: bottom;
            width: 36px;
            height: 48px;
            background: url(../../images/logo.png) center center / 48px 48px no-repeat;
        }
    }

    >.ipt-item {
        display: flex;
        border-bottom: solid 1px @g04;
        padding: 10px 0;
        margin-bottom: 12px;
        font-size: .8rem;

        >input {
            flex: 1;
            width: 0;
            background: transparent;
            outline: none;
            border: none;
            line-height: 32px;
            height: 32px;
            color: @c07;

            &::-webkit-input-placeholder {
                font-size: .7rem;
                color: @g05;
            }
        }

        >span {
            flex: 0 0 120px;
            text-align: center;
            line-height: 32px;
            border-left: solid 1px @g04;
            font-size: .7rem;
            color: @g05;
        }
    }

    .van-checkbox {
        font-size: .7rem;
        margin: 20px 0;
    }

    .reg {
        font-size: .7rem;
        color: @c07;
        float: right;
    }
}
</style>